<template>
  <div id="mine">
    <van-nav-bar
      title="我的"
    />
    <div class="mine_head">
      <div class="mine_img">
        <img src="../../assets/imgs/bg.png" alt="">
      </div>
      <div class="mine_name">
        <p>{{userInfo.name}}</p>
        <p><span>{{userType}}</span></p>
      </div>
    </div>
    <div class="operate">
      <p @click="$router.push('/changePassword')">
        <i class="icon iconfont icon-suo1"></i>
        <span>修改密码</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
       <p @click="$router.push('/complain')">
        <i class="icon iconfont icon-tousu"></i>
        <span>投诉与建议</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
      <!-- <p>
        <i class="icon iconfont icon-touxiang"></i>
        <span>修改头像</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p> -->
    </div>
    <!-- <div class="operate">
      <p>
        <i class="icon iconfont icon-tongji"></i>
        <span>工作统计</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
      <p>
        <i class="icon iconfont icon-tubiao"></i>
        <span>家长评价排名</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
      <p>
        <i class="icon iconfont icon-tousu"></i>
        <span>投诉与建议</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
    </div> -->
    <!-- <div class="operate">
      <p>
        <i class="icon iconfont icon-zhang"></i>
        <span>老师秀</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
      <p>
        <i class="icon iconfont icon-dianzipiao"></i>
        <span>电子推荐卡</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
    </div> -->
    <div class="operate">
      <p @click="logout">
        <i class="icon iconfont icon-mendoor13"></i>
        <span>退出登陆</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
    </div>
    <app-footer :index="1"></app-footer>
  </div>
</template>
<script>
import AppFooter from '@/components/AppFooter.vue'
import {getCookieStorage, clearCookieStorage} from '@/assets/js/common.js'
import { NavBar, Toast } from 'vant'
export default {
  data () {
    return {
      userType: '',
      userInfo: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (getCookieStorage('userType')) {
        this.userType = getCookieStorage('userType')
      } else {
        Toast({
          message: '登录失效！',
          duration: 2000,
          position: 'bottom'
        })
        setTimeout(() => {
          this.$router.push('/login')
        }, 2000)
      }
      if (getCookieStorage('userInfo')) {
        this.userInfo = getCookieStorage('userInfo')
      }
      if (getCookieStorage('appid')) {
        this.appid = getCookieStorage('appid') || 'appid'
      }
    },
    // 退出登陆
    logout () {
      this.$dialog.confirm({
        title: '是否退出登陆？'
      }).then(() => {
        this.$api.post(`/api/login/${this.appid}/logout`, {
          userId: getCookieStorage('userInfo').id
        }).then(res => {
          if (res.code === 0) {
            clearCookieStorage()
            this.$router.push('/login')
          }
        }).catch(() => {
          Toast({
            message: '服务器异常！',
            position: 'bottom'
          })
        })
      }).catch(() => {
      })
    }
  },
  components: {
    AppFooter,
    NavBar
  }
}
</script>

<style lang="scss" scoped>
#mine {
  height: 100%;
  background: #efefef;
  .mine_head {
    background: #8bb3dd;
    margin-bottom: .08rem;
    padding: .12rem;
    &::after {
      content: '';
      display: block;
      clear: both;
    }
    .mine_img {
      width: .6rem;
      float: left;
      height: .6rem;
      margin-right: .2rem;
      img {
        display: block;
        width: .6rem;
        height: .6rem;
        margin: 0 auto;
        border-radius: 50%;
      }
    }
    .mine_name {
      width: 2rem;
      float: left;
      p {
        margin: 0;
        color: #fff;
        &:first-child {
          font-size: 16px;
          margin-top: .04rem;
          margin-bottom: .1rem;
        }
        &:last-child {
          span {
            display: inline-block;
            height: .16rem;
            line-height: .16rem;
            padding: 0 .06rem;
            font-size: 12px;
            border-radius: .08rem;
            border: 1px solid #fff;
          }
        }
      }
    }
  }
  .operate {
    background: #fff;
    margin-bottom: .08rem;
    p {
      border-bottom: 1px solid #efefef;
      padding: .12rem;
      margin: 0;
      .icon {
        color: #2196f3;
      }
      .icon-iconfontyoujiantou{
        float: right;
        color: #777;
      }
      span {
        font-size: 16px;
        color: #777;
      }
      &:last-child {
        border: none;
      }
    }
  }
}
</style>
